<template>
  <Page title="听后记录">
    <template #navBarCustom>
      <div class="flex items-center navBox">
        <div class="back" @click="back">
          <img class="icon" src="static/icons/back.png" mode="" />
          <span style="color: #fff">听后记录</span>
        </div>
      </div>
    </template>
    <template #content>
      <div class="w-full h-full">
        <div
          class="container w-full h-full p-20px box-border overflow-hidden bg-white flex flex-col"
        >
          <div class="w-full h-full overflow-scroll">
            <!-- 概况 -->
            <div class="overview text-center">
              <div class="text-333 font-normal">
                <span>总得分：</span>
                <span
                  class="font-semibold"
                  :class="`text-${getScoreClass(score / totalScore)}`"
                  style="font-size: 0.5rem; line-height: 0.7rem"
                  >{{ score }}</span
                >
                <span :class="`text-${getScoreClass(score / totalScore)}`">分</span>
                <span>/{{ totalScore }}分</span>
              </div>
            </div>
            <!-- 详情 -->
            <div class="questions-wrap mt-10px">
              <div v-for="(i, index) in questions" :key="i.questionId" class="item">
                <Stem :data="i.stem" />
                <div class="hr my-30px" v-show="index < questions.length - 1"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page/newPage'
import Stem from '@/components/question/stem'
import { mapState } from 'vuex'
import { formatQuestionStem } from '@/utils/question'
import Mixin from '../mixin'

export default {
  components: {
    Page,
    Stem
  },
  mixins: [Mixin],
  inject: ['_addTagClickHandler', '_removeTagClickHandler'],
  data() {
    return {}
  },
  computed: {
    ...mapState(['homework']),
    questions() {
      const { questions } = this.homework.currentHomework

      return questions
        .map((_q, _index) => {
          if (_q.stem.structure_type === 'collector.fill') {
            const { questionId, stem, answer, remoteStudentAnswer = {} } = _q
            const { studentScore, questionScore, studentAnswer } = remoteStudentAnswer
            const {
              info: { audio, image = '', std = [], value = '' }
            } = stem

            let templateStemText = ''
            let templateStemImg = `<div class="mt-16px"><img src="${image}" /></div>`
            let templateScore = ''
            let templateAnswer = ''
            try {
              templateStemText = `<div><span style="line-height:0.40rem">${value.replace(
                /<[^>]+>/g,
                ''
              )}</span><span class="append-speaker"><img src="static/icons/speaker.png"  style="margin-left: 0.12rem;" data-question-id="${questionId}" data-audio-src="${audio}" /></span></div>`

              const { anSqs } = studentAnswer
              templateScore = `<div class="mt-10px"><div class="text-${this.getScoreClass(
                studentScore / questionScore
              )}"><span>（得分：${
                studentScore ? studentScore : 0
              }分/${questionScore}分）</span></div>${anSqs
                .map((i, index) => {
                  const { ans } = i
                  const {
                    anStudent,
                    studentScore: score = 0,
                    questionScore: totalScore = 0
                  } = ans[0]

                  return `<div class="text-${this.getScoreClass(score / totalScore)}">${
                    index + 1
                  }.${anStudent ? anStudent : '（未作答）'}</div>`
                })
                .join('')}</div>`
              templateAnswer = `<div class="mt-10px text-30C9A1"><div>参考答案：</div>${std
                .map((i) => {
                  const { xth, value } = i

                  return `<div>${xth}.${value}</div>`
                })
                .join('')}</div>`
            } catch (error) {
              console.log(error)
            }
            const html = `<div>${templateStemText}${templateStemImg}${templateScore}${templateAnswer}</div>`
            return {
              questionId,
              stem: formatQuestionStem({
                html,
                og: null,
                sqs: [],
                type: '英语听说-听后记录'
              }),
              answer,
              studentAnswer,
              studentScore,
              questionScore
            }
          } else {
            return null
          }
        })
        .filter((q) => !!q)
    },
    score() {
      let score = 0
      this.questions.forEach((q) => {
        const { studentScore } = q
        score += studentScore
      })

      return score
    },
    totalScore() {
      let totalScore = 0
      this.questions.forEach((q) => {
        const { questionScore } = q
        totalScore += questionScore
      })

      return totalScore
    }
  },
  mounted() {
    this._addTagClickHandler('img', this.handleImgClick)
    console.log(this.questions)
  },
  beforeDestroy() {
    this._removeTagClickHandler('img', this.handleImgClick)
  },
  methods: {
    back() {
      this.$router.back()
    },
    handleImgClick(node) {
      const { currentSrc = '' } = node
      if (currentSrc.indexOf('speaker.png') != -1) {
        const { audioSrc } = node.dataset

        if (!audioSrc || audioSrc === 'undefined') {
          this.$message.error('未作答')
          return
        }

        this.playAudio(node, audioSrc)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.navBox {
  padding: 0 20px;
  box-sizing: border-box;
}
.back {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;

  .icon {
    width: 17.14px;
    height: 30px;
    margin-right: 11px;
  }
}
.container {

  .overview {
    font-size: 26px;
  }

  .questions-wrap {
    .item {
      /deep/ .append-speaker {
        display: inline-block;
        width: 46px;
        height: 46px;
        position: relative;

        img {
          width: 46px;
          height: 46px;
          position: absolute;
          top: 50%;
          transform: translateY(-24%);
        }

        .playing {
          @keyframes play {
            0% {
              opacity: 0.5;
            }

            25% {
              opacity: 0.25;
            }

            50% {
              opacity: 0.5;
            }

            75% {
              opacity: 0.75;
            }

            100% {
              opacity: 1;
            }
          }

          animation: play 1s ease-in-out infinite backwards;
        }
      }

      .hr {
        height: 1px;
        background: #eee;
      }
    }
  }
}
</style>
